<template>
    <div class="adv">
        <div class="header">
            <span>广告管理</span>
        </div>
        <div class="line"></div>
        <!-- input部分 -->
        <el-form :inline="true" class="demo-form-inline" style="margin-left: 14px;">
            <el-form-item>
                <el-input placeholder="请输入广告名称" style="width:315px;height: 40px;" v-model="nameValue" />
            </el-form-item>
            <el-form-item label="广告位置" style="margin-top: 8px">
                <el-select placeholder="请选择" style="width: 172px;height: 35px;" v-model="placeValue">

                    <el-option label="首页轮播图" value="首页轮播图" />
                    <el-option label="思想观点频道TOP图" value="思想观点频道TOP图" />
                    <el-option label="实践案例频道TOP图" value="实践案例频道TOP图" />
                    <el-option label="公司介绍频道TOP图" value="公司介绍频道TOP图" />
                    <el-option label="事业机会频道TOP图" value="事业机会频道TOP图" />
                </el-select>
            </el-form-item>
            <el-form-item label="前台显示" style="width: 172px;height: 35px;margin-top: 8px">
                <el-select placeholder="请选择" v-model="lookValue">
                    <el-option label="请选择" value="请选择" />
                    <el-option label="是" value="是" />
                    <el-option label="否" value="否" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" style="width:96px;height: 35px;background-color:rgb(255, 153, 0) ;"
                    @click="handleFind">查询
                </el-button>
            </el-form-item>
        </el-form>
        <div class="line"></div>
        <!-- 表格部分 -->
        <div class="main" style="margin-left: 14px;margin-top:10px">
            <button class="btn" style="width:144px;height: 35px;background-color:rgb(255, 153, 0) ;"
                @click="dialogFormVisible = true">+新增广告图</button>
            <div class="table" style="margin-top:16px">
                <el-table :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :data="tableData"
                    style="width: 100%" border align="center">
                    <el-table-column prop="id" label="序号" width="62" align="center" />
                    <el-table-column prop="name" label="名称" width="250" align="center" />
                    <el-table-column prop="place" label="广告位置" width="192" align="center" />
                    <el-table-column prop="checked" label="前台显示" width="110" align="center" />
                    <el-table-column prop="sort" label="排序位置" width="116" align="center" />
                    <el-table-column prop="time" label="操作时间" width="167" align="center" />
                    <!-- <el-table-column prop="time" label="排序位置" width="116" /> -->
                    <el-table-column label="操作" width="180" align="center">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
                            <el-button link type="primary" size="small" @click="removeAdv(scope.row.id)">删除</el-button>
                            <!-- <el-button link type="primary" size="small" @click="handleLook(scope.row.id)">查看</el-button> -->

                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div style="display:flex;justify-content: space-between;align-items: center;">


            <div class="demo-pagination-block"
                style="display:flex; justify-content: center;align-items: center;margin: 20px;">

                <el-pagination v-model:currentPage="currentPage3" :background="true" layout="prev, pager, next, jumper"
                    :total="currentPage3" @current-change="handleCurrentChange" />
            </div>
        </div>




        <!-- 弹出层 -->
        <el-dialog v-model="dialogFormVisible" :title="title" style="width:600px;height: 590px;">
            <el-form :model="form">
                <el-form-item label="广告名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="广告位置" :label-width="formLabelWidth">
                    <el-select v-model="form.place" placeholder="请选择">
                        <el-option label="首页轮播图" value="首页轮播图" />
                        <el-option label="思想观点频道TOP图" value="思想观点频道TOP图" />
                        <el-option label="实践案例频道TOP图" value="实践案例频道TOP图" />
                        <el-option label="公司介绍频道TOP图" value="公司介绍频道TOP图" />
                        <el-option label="事业机会频道TOP图" value="事业机会频道TOP图" />


                    </el-select>
                </el-form-item>

                <el-form-item label="上传图片" :label-width="formLabelWidth">
                    <el-upload action="#" list-type="picture-card" :auto-upload="false" on-model="upload">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="添加链接" :label-width="formLabelWidth">
                    <!-- <el-input v-model="form.name" /> -->
                    <el-input v-model="form.link" />
                </el-form-item>
                <el-form-item style="margin-left:70px">
                    <span>是否前台展示 </span>
                    <el-checkbox-group v-model="checked">
                        <el-checkbox label="是" />
                        <el-checkbox label="否" />
                    </el-checkbox-group>

                </el-form-item>



                <el-form-item label="排序位" :label-width="formLabelWidth">
                    <el-input v-model="form.sort" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click=pushAdv>
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>


    </div>

</template>

<script setup>
import { Plus } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref, reactive } from "vue";
// import { hqpermset } from "../../api/index";
import useAdvStore from '../../store/adv'
import dayJS from 'dayjs'


//用store数据渲染
const store = useAdvStore()
const { addAdv } = store
// console.log(store.adv);
const tableData = ref([]);
// tableData.value = store.adv
tableData.value = store.adv.map(item => {
    // item.time = item.time ? dayJS(item.time).format('YYYY年MM月DD日') : '无'
    item.checked = true ? '是' : '否'

    return item
})



const currentPage3 = ref(1)
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}



//弹出层

//store方法push数据
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)

const formLabelWidth = '140px'

const checked = ref()

const form = reactive({

    name: '',
    place: '',

    link: '',
    checked: false,
    sort: null,


})

var title = ref('新增广告')
const pushAdv = () => {



    dialogFormVisible.value = false
    // console.log(form);
    const arradv = reactive({
        id: Math.ceil(Math.random() * 1000),
        name: form.name,
        place: form.place,
        checked: form.checked,
        link: form.link,
        sort: form.sort,
        time: dayJS(new Date()).format("YYYY年MM月DD日")
    })
    store.addAdv(arradv)

    tableData.value = store.adv.map(item => {
        // item.time = item.time ? dayJS(item.time).format('YYYY年MM月DD日') : '无'
        item.checked = true ? '是' : '否'

        return item
    })
}


//删除
const removeAdv = (id) => {
    // console.log(id);


    ElMessageBox.confirm(
        '是否删除当前数据?',
        '删除提示',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    ).then(() => {
        const res = tableData.value.filter(item => {
            return item.id !== id;
        })

        store.adv = res
        tableData.value = store.adv.map(item => {
            // item.time = item.time ? dayJS(item.time).format('YYYY年MM月DD日') : '无'
            item.checked = true ? '是' : '否'

            return item
        })
    })
        .catch(() => { })




}

//编辑部分
const handleEdit = (id) => {
    dialogFormVisible.value = true


    const res = tableData.value.find(item => {
        return item.id == id
    })
    // console.log(res);
    form.name = res.name
    form.place = res.place
    form.link = res.link
    form.sort = res.sort
    form.checked = res.checked

    if (id) {
        title.value = '编辑广告'

    }
}

// 查看部分
const handleLook = (id) => {
    dialogFormVisible.value = true
    if (id) {
        title.value = '查看广告'
        const res = tableData.value.find(item => {
            return item.id == id
        })
        // console.log(res);
        form.name = res.name
        form.place = res.place
        form.link = res.link
        form.sort = res.sort
        form.checked = res.checked

    }
}

//上传图片
const upload = (img) => {
    console.log(img);
}

//顶部筛选部分
const nameValue = ref()
const placeValue = ref()
const lookValue = ref()
const handleFind = () => {
    //     console.log(lookValue.value);
    //     console.log(nameValue.value);
    if (nameValue.value || lookValue.value || placeValue.value) {
        // console.log(132);

        // tableData.value = tableData.value.filter(item => {
        //     return item.place == placeValue.value
        // })

        if (nameValue.value) {
            tableData.value = tableData.value.filter(item => {
                return item.name == nameValue.value
            })
        } else if (lookValue.value) {
            tableData.value = tableData.value.filter(item => {
                return item.look == lookValue.value
            })

        } else if (placeValue.value) {
            tableData.value = tableData.value.filter(item => {
                return item.place == placeValue.value
            })

        }

    } else {
        // console.log('请输入查询内容');
        ElMessage.warning('请输入查询内容')
    }

    // tableData.value = tableData.value.filter(item => {
    //     return item.place == placeValue.value
    // })

}
</script>

<style lang="less" scoped>
.header {
    width: 100%;
    height: 40px;
    padding: 5px;
    color: rgb(255, 153, 0);
    line-height: 30px;
    margin: bottom -20px;


    span {
        display: inline-block;
        width: 100px;
        height: 26px;
        border-left: 6px solid rgb(255, 153, 0);
        padding: 5px;
    }

}

.line {

    height: 10px;
    width: 100%;
    background-color: #f9f9f9;
}

// .btn {
//     border: none;
//     color: #fff;
//     font-size: 14px;
// }
.main {
    // padding: 10px;

    .btn {
        color: #fff;
        background-color: rgb(255, 153, 0);
        border: none;
        width: 140px;
        height: 40px;
        cursor: pointer;
    }
}
</style>
